<template>
  <div id="app">
    <h1>{{title}}</h1>
    <input type="text" v-model="newItem" v-on:keyup.enter="addNew">
    <ul id="todo-list">
      <li v-for="item in items" :key="item.id" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
        {{item.label}}
      </li>
    </ul>
    <p>child tells me:{{childWords}}</p>
    <component-a msgfromfather='you die!' v-on:child-tell-me-something='listenToMyBoy'></component-a>
  </div>
</template>

<script>
import Store from './store'
import ComponentA from './components/componentA'
// console.log(Store);
export default {
  name: 'app',
  data(){
    return{
      title:'this is a todo list',
      items:Store.fetch(),
      newItem:'',
      childWords:''
    }
  },
  components:{ComponentA},
  watch:{//deep深度监视
    items:{
      handler:function(items){
        console.log(items);
        Store.save(items);
      },
      deep:true
    }
  },
  methods:{
    toggleFinish:function(item){
      // console.log(item.id);
      item.isFinished=!item.isFinished
    },
    addNew:function(){
      var i=$("#todo-list").find('li').length;
      i++;
      console.log('i0'+i);
      if(this.newItem==''){
        console.log('输入为空，不会添加todoList');
        return false;
      }
      this.items.push({
        label:this.newItem,
        isFinished:false,
        id:'i0'+i
      });
      this.newItem='';
      // Store.save(this.items);
    },
    listenToMyBoy:function(msg){
      this.childWords=msg;
    }
  }
}
</script>

<style>
.finished{
  text-decoration: line-through;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
